<template>
  <div class="menu">
    <el-row style="margin-bottom: 10px">
      <el-col :span="24" style="font-size: 18px;font-weight: bolder">{{user.name}}</el-col>
    </el-row>
    <el-row style="font-weight: normal">
      <el-col :span="17">{{user.careHomeName}}</el-col>
      <el-col :span="7">{{ role(user.role) }}</el-col>
    </el-row>
    <el-divider/>
    <div @click="edit" class="item">
      <span class="el-icon-edit" style="margin-right: 8px"></span>
      <span>编辑</span>
    </div>
    <el-popconfirm
        :title="'确定删除用户'+user.name+'吗?'"
        @confirm="del"
    >
      <div class="item" slot="reference">
        <span class="el-icon-delete" style="margin-right: 8px"></span>
        <span>删除</span>
      </div>
    </el-popconfirm>


  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Menu",
  data() {
    return {
      user: {},
      dialogVisible: true
    }
  },
  methods: {
    //根据用户role属性判断角色
    role(r) {
      if (r === 1) {
        return '管理员'
      } else if (r === 0) {
        return '老人'
      } else if (r === 2) {
        return '护工'
      } else {
        return '家属'
      }
    },
    //编辑信息
    edit() {
      this.$bus.$emit('showMenu', 0, 0, false)
      this.$bus.$emit('editUser', JSON.stringify(this.user))
    },
    //删除用户
    del() {
      this.$bus.$emit('showMenu', 0, 0, false)
      this.$bus.$emit('deleteUser', JSON.stringify(this.user))
    }
  },
  mounted() {
    this.$bus.$on('showMenu', (x, y, b, obj) => {
      let container = document.querySelector('.menu')
      if (container.style !== null) {
        if (b) {
          //如果菜单已经打开，那就先关闭再打开
          if (container.style.display === 'flex') {
            container.style.animationDuration = '0.1s'
            container.style.animationName = 'out'
            setTimeout(() => {
              container.style.display = 'none'
              container.style.display = 'flex'
              //打开
              container.style.left = x + 'px'
              container.style.top = y + 'px'
              container.style.animationName = 'in'
              //设置数据
              this.user = obj
            }, 100)
          } else {
            container.style.animationDuration = '0.1s'
            container.style.display = 'flex'
            //打开
            container.style.left = x + 'px'
            container.style.top = y + 'px'
            container.style.animationName = 'in'
            //设置数据
            this.user = obj
          }
        } else {
          container.style.animationDuration = '0.1s'
          container.style.animationName = 'out'
          setTimeout(() => {
            container.style.display = 'none'
          }, 200)
        }
      }
    })
  },
  beforeDestroy() {
    this.$bus.$off('showMenu')
  }
}
</script>

<style scoped>
.menu {
  display: none;
  position: absolute;
  width: 200px;
  padding: 10px;
  background: var(--menuBg);
  z-index: 1;
  border-radius: 10px;
  border: 1px var(--menuBorder) solid;
  color: var(--deepText);
  backdrop-filter: blur(8px);
  flex-direction: column;
  font-size: 14px;
  font-weight: bold;
  animation: in 0.2s forwards;
  transition: 0s;
  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
}

>>> .el-divider--horizontal {
  margin: 10px 0;
}

.item {
  padding: 7px 10px;
  margin-bottom: 5px;
  border-radius: 3px;
  cursor: pointer;
}

.item:hover {
  background-color: var(--hover);
}


.dialogBtn {
  font-size: 12px !important;
  background-color: var(--lightBg);
  padding: 5px 10px;
  border-radius: 3px;
  margin: 8px auto 0;
  cursor: pointer;
}

.dialogBtn:hover {
  background-color: var(--btnHover);
}

>>> .el-popover {
  background-color: black!important;
}
</style>
<style>
@keyframes in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes out {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
</style>